<template>
  <div class="echartsWordcloud" id="echartsWordcloud" style="width:737px;height:200px"></div>
</template>
<script>
import 'echarts-wordcloud/dist/echarts-wordcloud'
export default {
  mounted () {
    this.initEcharts()
  },
  methods: {
    initEcharts () {
      const echartsWordcloud = this.$echarts.init(document.getElementById('echartsWordcloud'));
      const colors = ['rgb(155, 139, 186)', 'rgb(224, 152, 199)', 'rgb(143, 211, 232)', 'rgb(113, 102, 158)'];
      const option = {
        title: {
          text: '产品销售概览',
          left: '0',
          top: '10',
          textStyle: {
            color: 'rgb(85, 85, 85)',
            fontSize: 14,
            fontWeight: 400
          }
        },
        series: [
          {
            type: 'wordCloud',
            // 用来调整词之间的距离
            gridSize: 8,
            // 用来调整字的大小范围
            sizeRange: [14, 30],
            rotationRange: [0, 0],
            // 随机生成字体颜色
            textStyle: {
              fontWeight: '700',
              fontFamily: 'sans-serif',
              color: v => (
                  `${colors[v.dataIndex]}`
              )
            },
            // 位置相关设置
            left: 'center',
            top: 'center',
            right: null,
            bottom: null,
            width: '300%',
            height: '300%',
            // 数据
            data: [
              { name: '文具', value: '8069' },
              { name: '羽绒服', value: '1007' },
              { name: '家纺', value: '3120' },
              { name: '电视', value: '1480' },
              { name: '电脑', value: '2100' },
              { name: '衬衫', value: '789' },
              { name: '配饰', value: '148' },
              { name: '洗衣机', value: '83' },
              { name: '厨具', value: '2800' },
              { name: '马甲', value: '1360' },
              { name: '外套', value: '2100' },
              { name: '衬衫', value: '2800' },
              { name: '内衣', value: '1000' },
              { name: '耗材', value: '1900' }
            ]
          }
        ]
      };
      echartsWordcloud.setOption(option);
      // 点击事件
      // echartsWordcloud.on('click', function (e) {})
    }
  }
};
</script>

<style lang="less" scoped>

</style>
